import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  ScrollView,
  Image
} from 'react-native';

import BasePage from '../common/BasePage';
import CommonStyles from '../../common/CommonStyles';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import ToastUtils from '../../common/ToastUtils';

import HeartBaseContentPage from '../../pages/heart/HeartBaseContentPage';

var job_config=[{icon:require("../../../resource/images/heart/love_thing_icon1.png"), width:48, height:48, title:"最新活动"},
{icon:require("../../../resource/images/heart/love_thing_icon1.png"), width:48, height:48, title:"我要报名"},
{icon:require("../../../resource/images/heart/love_thing_icon1.png"), width:48, height:48, title:"精彩回放"},
{icon:require("../../../resource/images/heart/love_thing_icon1.png"), width:48, height:48, title:"我的感受"}]
var test_worry_data=[{image:require('../../../resource/images/heart/love_thing_icon1.png'),desc:"心理上的痛苦程度远比生理上的",seeCount:12381,
desc2:"爱自己，让未来的自己提前上线，你可以做到啊啊啊"}]
export default class HeartJobPage extends HeartBaseContentPage {
  constructor(props) {
    super(props);
  }


  //override
  _renderTab(){
    return (<View style = {{flexDirection: 'row', justifyContent: 'space-around',
      width:SizeUtils.getWindowSize().width,
        marginTop:SizeUtils.translateDesignNumToCode(50)}}>
                {this._getTabButton(job_config[0],0)}
                 {this._getTabButton(job_config[1],1)}
                  {this._getTabButton(job_config[2],2)}
                   {this._getTabButton(job_config[3],3)}
        </View>);
  }

  _getTabButton(item,index) {
    return(
      <TouchableOpacity
        onPress = {() => this._onPressPageBtn(index)}
        style={{flexDirection: 'column',alignItems: 'center'}}>
        <Image source={item.icon} style={{width:SizeUtils.translateDesignWidthToCode(48),height:SizeUtils.translateDesignWidthToCode(48)}}/>
        <Text style={{color: "#666666",marginTop:SizeUtils.translateFontSizeToCode(12),backgroundColor:"#00000000",
            textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(24)}}>{item.title}
        </Text>
      </TouchableOpacity>
    )
  }

  _renderContent(){
    return <View style={{width:SizeUtils.getWindowSize().width,flexDirection: 'column',alignItems: 'center',
              marginTop:SizeUtils.translateDesignHeightToCode(50)}}>
             <View style={{width:SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80),flexDirection: 'column',alignItems: 'center',}}>
               <View style={{position:"absolute",left:0,bottom:SizeUtils.translateDesignHeightToCode(16),
               backgroundColor:"#eeeeee",width:SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80),
               height:SizeUtils.translateDesignNumToCode(3)}}>
               </View>
               <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(20),
                color: "#000",fontWeight:'bold', backgroundColor:"#ffffff",
                paddingRight:SizeUtils.translateDesignWidthToCode(20),
                textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(32)}}>热门活动
               </Text>

             </View>

           {this._renderContentItem(0,true)}
           {this._renderContentItem(1,false)}
       </View>
  }

  _renderContentItem(index,showBottom){
    var item = {};// test_worry_data[0];
    var itemWidth =SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80);
    return (
      <TouchableOpacity style={{width:itemWidth,
            borderBottomWidth:showBottom ?SizeUtils.translateDesignNumToCode(3):0,borderColor:"#eeeeee",
         marginTop:SizeUtils.translateDesignHeightToCode(30),paddingBottom:SizeUtils.translateDesignHeightToCode(23)}}
            onPress={()=>this._onPressContentItem(index)}>
          <View>
             <Image source={item.image} style={{width:itemWidth,height:SizeUtils.translateDesignWidthToCode(315)}}/>
             <View style={{width:itemWidth,position:"absolute",left:0,bottom:SizeUtils.translateDesignHeightToCode(30)}}>
               <Text style={{color: "#fff",textAlign:"center",fontSize:SizeUtils.translateFontSizeToCode(26)}}>{item.desc}</Text>
             </View>
          </View>
          <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(5),fontWeight:'bold',textAlign:"left",
          marginTop:SizeUtils.translateDesignHeightToCode(20),fontSize:SizeUtils.translateFontSizeToCode(28)}}>{item.desc2}</Text>
          <View style={{marginTop:SizeUtils.translateDesignHeightToCode(15),width:itemWidth,flexDirection:"row", justifyContent:"space-between"}}>
             <Text style={{ marginLeft:SizeUtils.translateDesignWidthToCode(5),color: "#999",
             fontSize:SizeUtils.translateFontSizeToCode(26)}}>明天</Text>
            <Text style={{color: "#999",
            textAlign:"right",fontSize:SizeUtils.translateFontSizeToCode(26)}}>{item.seeCount}人学习</Text>
          </View>
      </TouchableOpacity>)
  }

  _getBackImage(){
    return require("../../../resource/images/heart/love_thing_icon1.png");
  }

  _onPressContentItem(index) {
    let url = "";
    if(index == 0) {
      url = "http://daqing.womob.cn/app/index.php?i=4&c=entry&id=3&do=article&m=oilfield_article";
    }
    else if(index == 1) {
      url = "http://daqing.womob.cn/app/index.php?i=4&c=entry&id=33&do=article&m=oilfield_article";
    }
    this.gotoPage(Config.pages.heart_common_web, {url:url});
  }

 _onPressPageBtn(index) {
    console.log("_onPressItem",index);
    let url = "";
    if(index == 0) {
      url = "http://daqing.womob.cn/app/index.php?i=4&c=entry&do=index&m=oilfield_article";
    }
    // else if(index == 1) {
    //   url = "http://daqing.womob.cn/app/index.php?i=4&c=entry&id=4&do=course&m=oilfield_training";
    // }
    else {
      ToastUtils.show("功能暂未开放");
      return;
    }
    this.gotoPage(Config.pages.heart_common_web, {url:url});
  }
}
